<template>
  <view class="container">
    <view class="dataList" v-if="resumeDataList?.length">
      <view class="row" v-for="(item, index) in resumeDataList" :key="index">
        <!-- 左边模块 -->
        <view class="left">
          <u-image
            :show-loading="true"
            :src="item.headPath"
            width="80rpx"
            height="80rpx"
            radius="100%"
          >
            <!-- 加载中 -->
            <template v-slot:loading>
              <u-loading-icon color="#969696"></u-loading-icon>
            </template>
            <!-- 图片路径错误 -->
            <template #error>
              <view
                style="
                  border: 1px solid rgb(254, 170, 170);
                  border-radius: 100%;
                "
              >
                <u-image
                  :show-loading="true"
                  src="./../../static/default_avatar.png"
                  width="80rpx"
                  height="80rpx"
                  radius="100%"
                ></u-image>
              </view>
            </template>
          </u-image>
        </view>
        <!-- 右边模块 -->
        <view class="right">
          <view class="name">
            <text>{{ item.username }}</text>
            <u-image
              :show-loading="true"
              mode="aspectFit"
              :src="
                item.gender == 1
                  ? 'https://pic.imgdb.cn/item/6588005ec458853aeffb6922.png'
                  : 'https://pic.imgdb.cn/item/6588005ec458853aeffb69ca.png'
              "
              width="30rpx"
              height="30rpx"
            ></u-image>
          </view>
          <!-- <view class="college"
            >{{ item.college?.this }}·{{ item.college?.major }}</view
          > -->
          <view class="college">{{ item.institute }} · {{ item.grade }}</view>
          <view class="tag">
            <view
              class="tag-row"
              v-for="(item2, index2) in item.domain"
              :key="index2"
            >
              {{ item2 }}
            </view>
          </view>
          <view class="interest">
            <view class="btn" @click="handleInterest(item.id)">感兴趣</view>
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      mode="car"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
      text="暂无我的喜欢"
      marginTop="100"
    >
    </u-empty>

    <view class="loadmore-container">
      <!-- 加载更多/没有更多了 -->
      <view class="wrap" v-if="resumeDataList?.length">
        <u-loadmore :status="status" :loading-text="loadingText" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { getItem } from "@/utils/localStorage";
import { myFavorite } from "@/api/user";
import env from "@/utils/env";
import { Alert, unAlert } from "@/utils/tool";

// 简历列表---
const resumeDataList = ref([]);
const pageNo = ref(1); // 哪一页
const limit = ref(5); // 几条
// 数据库中条数
const total = ref(0);

onMounted(async () => {
  app();
});
const app = async () => {
  if (resumeDataList.value?.length) {
    // 获取了数据
    // console.log('进来了', resumeDataList.value.length, total.value)
    // 没有更多了
    if (resumeDataList.value?.length >= total.value) {
      console.log("没有数据了");
      status.value = "nomore";
      return;
    }
  }

  const result = await myFavorite(pageNo.value, limit.value);

  console.log("简历：", result);

  // skeletonCode.value = result.data.code;

  if (result.data.code == 200) {
    // resumeDataError.value = result.data.data.result?.length;

    if (resumeDataList.value) {
      resumeDataList.value = [
        ...resumeDataList.value,
        ...result.data.data.result,
      ];
      console.log("拼接数据中...");
      console.log("resumeDataList.value", resumeDataList.value);
    } else {
      resumeDataList.value = result.data.data.result;
    }

    // 格式化路径
    resumeDataList.value.map((item) => {
      item.headPath = `${env.baseUrl}/head/${item.headPath}`;
    });

    console.log("resumeDataList.value：", resumeDataList.value);

    total.value = result.data.data.total;
  }

  // console.log("简历列表result：", result);
};

// 加载更多
// 改变status即可
const status = ref("轻轻上拉");
const loadingText = ref("努力加载中");

// 页面触底事件
onReachBottom(() => {
  console.log("测四");
  status.value = "loading";
  pageNo.value++;
  app();

  console.log("total：", total.value);
});

// 感兴趣
const handleInterest = (thisId) => {
  uni.navigateTo({
    url: `/pagesA/resume/index?thisId=${thisId}`,
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  padding: 0 30rpx;

  // background-image: linear-gradient(
  //   to bottom,
  //   rgba(204, 222, 253, 0.93),
  //   #f2f7ff,
  //   #f2f7ff,
  //   #f2f7ff,
  //   #ffffff
  // );
  background-color: #f4f5f9;
  min-height: 100vh;

  // padding-bottom: 150rpx;
  padding-top: 20rpx;

  .dataList {
    border-radius: 20rpx;
    margin-top: 20rpx;

    .row {
      background-color: #fff;
      // box-shadow: 0 0 30rpx #ececec;
      margin-bottom: 20rpx;
      padding: 30rpx 40rpx;
      display: flex;
      border-radius: 16rpx;
      padding-bottom: 0;

      .left {
        margin-right: 25rpx;
      }

      .right {
        flex: 1;

        view {
          margin-bottom: 10rpx;
        }

        .name {
          font-size: 34rpx;
          font-weight: 800;

          display: flex;
          align-items: center;

          text {
            margin-right: 10rpx;
          }
        }

        .college {
          color: #6d6c72;
          font-size: 24rpx;
        }

        .tag {
          display: flex;
          flex-wrap: wrap;

          .tag-row {
            padding: 5rpx 14rpx;
            background-color: #f5f6fa;
            margin-right: 16rpx;
            color: #9e9da0;
            font-size: 22rpx;
            border-radius: 10rpx;
            margin-bottom: 5rpx;
          }
        }

        .interest {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .btn {
            padding: 15rpx 40rpx;
            background-color: #0053fb;
            color: #fff;
            border-radius: 40rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  // 加载更多容器
  .loadmore-container {
    padding-bottom: 150rpx;
  }
}
</style>
